<template>
    <div class="app-container">
        <div class="top-almost">
            <div class="top-title">
                概览
            </div>
            <div class="top-radio">
                <el-radio-group v-model="topRadio">
                    <el-radio-button label="0">全部</el-radio-button>
                    <el-radio-button label="2">自定义</el-radio-button>
                </el-radio-group>
                <el-date-picker v-model="topDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" style="margin-left: 200px;" :disabled="topRadio == 0">
                </el-date-picker>
            </div>
            <div class="all-context">
            <div class="top-context">
                <div class="context-item">
                    <div class="context-title">
                        跟进记录
                    </div>
                    <div class="context-item">
                        <div class="title">
                            已合作
                        </div>
                        <div class="number">
                            700
                        </div>
                    </div>
                    <div class="context-item">
                        <div class="title">
                            已合作
                        </div>
                        <div class="number">
                            700
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-context">
                <div class="context-item">
                    <div class="context-title">
                        经销商
                    </div>
                    <div class="context-item">
                        <div class="title">
                            已合作
                        </div>
                        <div class="number">
                            700
                        </div>
                    </div>
                    <div class="context-item">
                        <div class="title">
                            已合作
                        </div>
                        <div class="number">
                            700
                        </div>
                    </div>
                    <div class="context-item">
                        <div class="title">
                            已合作
                        </div>
                        <div class="number">
                            700
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-context">
                <div class="context-item">
                    <div class="context-title">
                        项目
                    </div>
                    <div class="context-item">
                        <div class="title">
                            已合作
                        </div>
                        <div class="number">
                            700
                        </div>
                    </div>
                    <div class="context-item">
                        <div class="title">
                            已合作
                        </div>
                        <div class="number">
                            700
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <project-add></project-add>
    <records></records>
    <project-all></project-all>
    <project-almost></project-almost>
    <project-area></project-area>
    </div>
</template>
<script>
import projectAdd from './projectAdd/index.vue'
import records from './records/index..vue'
import projectAll from './projectAll/index.vue'
import projectArea from './projectArea/index.vue'
import projectAlmost from './projectAlmost/index.vue'
export default {
    components:{
        projectAdd,
        records,
        projectAll,
        projectArea,
        projectAlmost
    },
    data() {
        return {
            topRadio:'0',
            topDate:'',
        }
    },
}
</script>
<style lang="scss" scoped>
.app-container {
    .top-almost {
        .top-title {
            border-left: 8px solid #409eff;
            margin: 20px 0;
            padding: 3px 0 3px 25px;
            font-size: 18px;
            font-weight: bold;
        }

        .top-radio {
            display: flex;
            justify-content: center;
        }
    }
    .all-context{
        display: flex;
        justify-content: space-between;
        width: 100%;
    .top-context {
        margin-top: 20px;
        width: 30%;
     
        .context-item {
            background-color: #b2d3f1;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 150px;
            .context-title{
                text-align: center;
                font-weight: bold;  
                font-size: 30px;
            }
            .context-item{
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .title{
                    margin-bottom: 20px;
                    font-size: 20px;
                }
                .number{
                    color: #1210a7;
                    font-weight: bold;
                    font-size: 22px;
                }
            }
        }
    }
}
}
</style>